<template>
<ul class="vip_ul">
            <li class="vip_li">
                <div class="vdiv1">
                    <p class="vp1">1天跳过广告特权</p>
                    <p class="vp2">明日预告：1天跳过广告特权</p>
                </div>
                <div class="vdiv2">
                    <span class="vs1">立即领取</span>
                    <span class="vs2">规则</span>
                </div>
            </li>
            <li class="vip_li">
                <div class="vdiv3">
                    <p class="vp1">首3月10元/月</p>
                    <p class="vp2">原19元</p>
                </div>
                <div class="vdiv4">
                    <span class="vs1">开通</span>
                    <span class="vs2">规则</span>
                </div>
            </li>
            <li class="vip_li">
                <div class="vdiv1">
                    <p class="vp1">1天跳过广告特权</p>
                    <p class="vp2">明日预告：1天跳过广告特权</p>
                </div>
                <div class="vdiv2">
                    <span class="vs1">立即领取</span>
                    <span class="vs2">规则</span>
                </div>
            </li>
            <li class="vip_li">
                <div class="vdiv3">
                    <p class="vp1">首3月10元/月</p>
                    <p class="vp2">原19元</p>
                </div>
                <div class="vdiv4">
                    <span class="vs1">开通</span>
                    <span class="vs2">规则</span>
                </div>
            </li>
        </ul>
</template>

<script>
export default{
    name:'VipBar'

}

</script>



<style scoped>


/* vip区域 */

main .vip_ul {
    padding: .18rem .15rem;
    background-color: #fff;
    display: flex;
    overflow: auto;
}


/* 隐藏滚动条 */

main .vip_ul::-webkit-scrollbar {
    display: none;
}

main .vip_li {
    display: block;
    width: 2.45rem;
    height: 1.05rem;
    flex-shrink: 0;
    background-color: rgb(255, 214, 138);
    border-radius: .06rem;
}

main .vip_li:not(:last-child) {
    margin-right: .06rem;
}


/* vip1 */

main .vip_li .vdiv1 {
    box-sizing: border-box;
    height: .6rem;
    border-radius: .06rem .06rem 0rem 0rem;
    padding: .12rem;
    background-color: rgb(250, 234, 248);
}

main .vip_li .vdiv1 .vp1 {
    font-size: .16rem;
    color: rgb(68, 66, 66);
}

main .vip_li .vdiv1 .vp2 {
    font-size: .12rem;
    color: rgb(204, 139, 178);
}

main .vip_li .vdiv2 {
    height: .45rem;
    border-radius: 0rem 0rem .06rem .06rem;
    background-color: rgb(249, 223, 244);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: .12rem;
    align-items: center;
}

main .vip_li .vdiv2 .vs1 {
    display: block;
    height: .3rem;
    width: .8rem;
    border: .01rem solid grey;
    border-radius: .15rem;
    text-align: center;
    line-height: .3rem;
    background-color: rgb(252, 242, 250);
    color: rgb(179, 76, 127);
    border: none;
}

main .vip_li .vdiv2 .vs2 {
    color: rgb(179, 76, 127);
    font-size: .1rem;
}


/* vip2 */

main .vip_li .vdiv3 {
    box-sizing: border-box;
    height: .6rem;
    border-radius: .06rem .06rem 0rem 0rem;
    padding: .12rem;
    background-color: rgb(253, 245, 227);
}

main .vip_li .vdiv3 .vp1 {
    font-size: .16rem;
    color: rgb(134, 69, 23);
}

main .vip_li .vdiv3 .vp2 {
    font-size: .12rem;
    color: rgb(189, 160, 134);
    text-decoration: line-through;
}

main .vip_li .vdiv4 {
    height: .45rem;
    border-radius: 0rem 0rem .06rem .06rem;
    background-color: rgb(251, 237, 205);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: .12rem;
    align-items: center;
}

main .vip_li .vdiv4 .vs1 {
    display: block;
    height: .3rem;
    width: .8rem;
    border: .01rem solid grey;
    border-radius: .15rem;
    text-align: center;
    line-height: .3rem;
    background-color: rgb(253, 248, 235);
    color: rgb(179, 76, 127);
    border: none;
}

main .vip_li .vdiv4 .vs2 {
    color: rgb(179, 76, 127);
    font-size: .1rem;
}



</style>
